<template>
  <div class="energyPonsump">
    <stitle :bg="bg" text="本月能耗统计(按设备)" :type="0" />
    <div class="tablecon">
      <el-table :data="tableData" style="width: 100%" height="180px">
        <el-table-column prop="name" label="设备名" width="70px">
        </el-table-column>
        <el-table-column prop="kc" label="用水量" width="70px">
        </el-table-column>
        <el-table-column prop="pd" label="用电量" width="70px">
        </el-table-column>
        <el-table-column prop="ck" label="用气量" width="70px">
        </el-table-column>
        <el-table-column prop="peo" label="记录人员" width="80px">
        </el-table-column>
      </el-table>
    </div>
    <div id="echartEnergy"></div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
export default {
  name: "energyPonsump",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      tableData: [
        {
          name: "设备1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "设备1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "设备1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
      ],
      edata: [
        { value: 40, name: "设备一" },
        { value: 18, name: "设备二" },
        { value: 22, name: "设备三" },
      ],
    };
  },
  methods: {
    setEchart() {
      const _echarts = this.$echarts.init(
        document.getElementById("echartEnergy")
      );
      const option = {
        tooltip: {
          trigger: "item",
        },
        title: [
          {
            text: "用水量",
            left: "left",
            top: 20,
            textStyle: {
              color: "#AB83EE",
              fontSize: 14,
              fontFamily: "ZZGFLQ",
              fontStyle: "oblique",
            },
          },
          {
            text: "用电量",
            left: 200,
            top: 20,
            textStyle: {
              color: "#5769C6",
              fontSize: 14,
              fontFamily: "ZZGFLQ",
              fontStyle: "oblique",
            },
          },
          {
            text: "用气量",
            left: "left",
            top: 180,
            textStyle: {
              color: "#5F98E7",
              fontSize: 14,
              fontFamily: "ZZGFLQ",
              fontStyle: "oblique",
            },
          },
        ],
        legend: {
          itemWidth: 15,
          itemHeight: 10,
          bottom: "0px",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        color: ["#AB83EE", "#5769C6", "#5F98E7"],
        series: [
          {
            type: "pie",
            radius: [0, 45],
            center: ["28%", "25%"],
            itemStyle: {
              normal: {
                labelLine: {
                  length: 1,
                },
              },
            },
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 12,
                  },
                },
              },
            },
            data: this.edata,
          },
          {
            type: "pie",
            radius: [35, 45],
            center: ["70%", "25%"],
            itemStyle: {
              normal: {
                labelLine: {
                  length: 1,
                },
              },
            },
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 12,
                  },
                },
              },
            },
            data: this.edata,
          },
          {
            type: "pie",
            radius: [25, 55],
            roseType: "area",
            center: ["45%", "65%"],
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 12,
                  },
                },
              },
            },
            data: this.edata,
          },
        ],
      };
      _echarts.setOption(option);
    },
  },
  mounted() {
    this.setEchart();
  },
  computed: {},
};
</script>

<style lang="scss"  scoped>
.energyPonsump {
  width: 100%;
  padding-right: 70px;
  box-sizing: border-box;
  #echartEnergy {
    width: 100%;
    height: 400px;
  }
}
</style>